<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        .upload-container {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #45a049;
        }
        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
            white-space: pre-wrap;
            display: none;
        }
        .preview {
            margin-top: 15px;
            max-width: 100%;
            display: none;
        }
        .preview img {
            max-width: 300px;
            max-height: 200px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>文件上传测试</h1>
    
    <div class="upload-container">
        <h2>单文件上传</h2>
        <form id="singleUploadForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="file">选择文件:</label>
                <input type="file" id="file" name="file" onchange="previewSingleImage(event)">
            </div>
            <div class="preview" id="singlePreview"></div>
            <button type="button" class="btn" onclick="uploadSingleFile()">上传</button>
        </form>
    </div>
    
    <div class="upload-container">
        <h2>多文件上传</h2>
        <form id="multiUploadForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="files">选择多个文件:</label>
                <input type="file" id="files" name="files" multiple onchange="previewMultipleImages(event)">
            </div>
            <div class="preview" id="multiplePreview"></div>
            <button type="button" class="btn" onclick="uploadMultipleFiles()">上传</button>
        </form>
    </div>
    
    <div id="result"></div>
    
    <script>
        function previewSingleImage(event) {
            const preview = document.getElementById('singlePreview');
            preview.innerHTML = '';
            preview.style.display = 'block';
            
            const file = event.target.files[0];
            if (file && file.type.startsWith('image/')) {
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                preview.appendChild(img);
            } else {
                preview.textContent = `已选择: ${file.name} (${formatFileSize(file.size)})`;
            }
        }
        
        function previewMultipleImages(event) {
            const preview = document.getElementById('multiplePreview');
            preview.innerHTML = '';
            preview.style.display = 'block';
            
            const files = event.target.files;
            if (files.length > 0) {
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    if (file.type.startsWith('image/')) {
                        const img = document.createElement('img');
                        img.src = URL.createObjectURL(file);
                        preview.appendChild(img);
                    } else {
                        const fileInfo = document.createElement('div');
                        fileInfo.textContent = `${file.name} (${formatFileSize(file.size)})`;
                        preview.appendChild(fileInfo);
                    }
                }
            }
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        function uploadSingleFile() {
            const fileInput = document.getElementById('file');
            if (fileInput.files.length === 0) {
                alert('请选择一个文件');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            fetch('/files/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                displayResult(data);
            })
            .catch(error => {
                console.error('Error:', error);
                displayResult({ code: 500, message: '上传失败: ' + error.message });
            });
        }
        
        function uploadMultipleFiles() {
            const filesInput = document.getElementById('files');
            if (filesInput.files.length === 0) {
                alert('请选择至少一个文件');
                return;
            }
            
            const formData = new FormData();
            for (let i = 0; i < filesInput.files.length; i++) {
                formData.append('files', filesInput.files[i]);
            }
            
            fetch('/files/batch-upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                displayResult(data);
            })
            .catch(error => {
                console.error('Error:', error);
                displayResult({ code: 500, message: '上传失败: ' + error.message });
            });
        }
        
        function displayResult(data) {
            const resultDiv = document.getElementById('result');
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = JSON.stringify(data, null, 2);
        }
    </script>
</body>
</html> 